<template>
  <div class="left-chart-3">
     <dv-border-box-13>
       <div style="display:flex;align-items: center;height: 100%;">
       <div id="lc3"></div>
        <div style="display: flex; flex-direction: column; justify-content: space-evenly; height: 100%;">
            <div style="display:flex;align-items: center;">
              <span>全行发票连号率</span>
              <dv-digital-flop :config="config" style="width:70px;height:50px;" />
            </div>
            <div style="display:flex;align-items: center;">
              <span>机构发票连号率</span>
              <dv-digital-flop :config="config" style="width:70px;height:50px;" />
            </div>
            <div style="display:flex;align-items: center;">
              <span>机构发票连号率</span>
              <dv-digital-flop :config="config" style="width:70px;height:50px;" />
            </div>
          </div>
          </div>
     </dv-border-box-13>
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  name: 'LeftChart3',
  data () {
    return {
      config: {
        number: [100],
        content: '{nt}%',
        style: {
          fontSize: 16
        }
      }
    }
  },
  mounted () {
    this.getlc3()
  },
  methods: {
    getlc3 () {
      const mylChart3 = echarts.init(document.getElementById('lc3'))
      const option = {
        title: {
          text: '变动费用占比情况',
          textStyle: {
            color: '#fff'
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          right: 10,
          top: 20,
          bottom: 20,
          textStyle: {
            color: '#fff'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            axisLine: {
              lineStyle: {
                color: '#fff'
              }
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisLine: {
              lineStyle: {
                color: '#fff'
              }
            }
          }
        ],
        series: [
          {
            name: 'Email',
            type: 'bar',
            stack: 'Ad',
            emphasis: {
              focus: 'series'
            },
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: 'Video Ads',
            type: 'bar',
            stack: 'Ad',
            emphasis: {
              focus: 'series'
            },
            data: [150, 232, 201, 154, 190, 330, 410]
          }

        ]
      }
      option && mylChart3.setOption(option)
    }
  }
}
</script>

<style lang="less">
.left-chart-3 {
  width: 100%;
  height: 33.3%;
  display: flex;
  flex-direction: column;
  #lc3{
    width: 100%;
    height: 100%;
  }
}
</style>
